<script setup>
import {onMounted, ref} from "vue";
import {pageObj, columns, pageClick} from "@/until/tool.js";
import Http from "@/http/http.js";
import {Message} from "@arco-design/web-vue";
import {useRouter} from "vue-router";
import moment from "moment";

const router = useRouter()

const keyword = ref(null)
const tableData = ref([])

const props = defineProps({ // 非ts专有声明
  permissionId: {
    type: Number,
    default: ''
  }
})

onMounted(() => {
  getDate(null)
})


const getDate = async (criteria) => {
  keyword.value = criteria
  let Obj = {current: pageObj.value.current - 1, pageSize: pageObj.value.pageSize, PermissionId: 3}
  if (criteria) {
    Obj['criteria'] = criteria
  }
  const res = await Http.userList(Obj);
  tableData.value = res.Data.Data;
  tableData.value.forEach(d => {
    d.CreateTime = moment(d.CreateTime).format("YYYY-MM-DD HH:mm:ss")
  })
  pageObj.value.total = res.Data["DataCount"]
}
const seaData = (criteria) => {
  getDate(criteria)
}


const delData = async (UserAccount) => {
  const res = await Http.delUser({user: [UserAccount]});
  if (res["Msg"] === "OK") {
    Message.success(res.Data);
  }
  await getDate(keyword.value);
}


const tableClick = (current) => {
  pageClick.tableClick(current)
  getDate(keyword.value);
}

const pageSizeClick = (pageSize) => {
  pageClick.pageSizeClick(pageSize)
  getDate(keyword.value);
}

const editUser = (user) => {
  router.push(`/member/userEdit?PermissionId=${props.permissionId}&UserId=${user}`)
}

const identity = (permissionId) => {
  switch (permissionId) {
    case 1:
      return "教师"
    case 2:
      return "企业"
    default:
      return '学生'
  }
}

const userId = ref(0)
const isResume = ref(false)
const showResume = (UserId) => {
  userId.value = UserId
  isResume.value = true;
}
</script>

<template>
  <a-card>
    <div class="sea">
      <a-space>
        <span><a-tooltip :content="`搜索${identity(props.permissionId)}会员,支持帐号，手机号，姓名搜索`">关健词<component is="icon-question-circle"/></a-tooltip>:</span>
        <a-tooltip :content="`搜索${identity(props.permissionId)}会员,支持帐号，手机号，姓名搜索`">
          <a-input-search v-model="keyword" :style="{width:'320px'}" placeholder="支持帐号，手机号，姓名查找" search-button @search="seaData"/>
        </a-tooltip>
        <a-button @click="getDate(null)">所有会员</a-button>
        <a-button @click="editUser(0)" type="primary">添加会员</a-button>
      </a-space>
    </div>
    <a-card style="margin-top: 20px;">
      <div class="">
        <a-table :data="tableData" :pagination="pageObj" @pageChange="tableClick" @page-size-change="pageSizeClick">
          <template #columns>
            <a-table-column v-for="(item,i) of columns" :title="item.title" :data-index="item.dataIndex" :key="i++">
              <template v-if="item.title==='序号'" #cell="{ rowIndex}">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column title="操作" #cell="{ record }">
              <a-space class="operating">
                <a @click="editUser(record['UserId'])">编辑</a>
                <a-popconfirm :content="`确定删除用户 ${record['UserAccount']} ?`" @ok="delData(record['UserAccount'])" okText="删除" cancelText="取消">
                  <a>删除</a>
                </a-popconfirm>
              </a-space>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </a-card>
  </a-card>
</template>
